<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="../../static/dist/layui.js"></script>
    <link rel="stylesheet" href="../../static/dist/css/layui.css">
    <script type="text/javascript" src="../../static/dist/tableSelect.js"></script>
    <title>TableSelect</title>
    <style>
        .layui-table-cell{
            text-align:center;

            height: auto;

            white-space: normal;

        }

        .layui-table img{
            max-width:300px
        }
    </style>
</head>

<body>
<div class="layui-row layui-bg-black" >
    <div class="layui-col-md1 layui-bg-black">
        <a href="http://localhost:5000/index">
            <img src="../../static/logo.png" class="layui-logo" style="height:55px">
        </a>
        <!--        <p style="padding:27px"></p>-->
    </div>
    <div class="layui-col-md8 layui-bg-black">
        <form class="layui-form" action="" style="padding:11px">
            <div class="layui-form-item" style="height: 18px">
                <!--                <label class="layui-form-label"></label>-->
                <div class="layui-input-inline" style="width:860px">
                    <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input" id="search">
                </div>
                <button type="button" class=" layui-btn layui-btn-primary  layui-btn-warm">
                    <i class="layui-icon layui-icon-search"></i>
                </button>
            </div>
        </form>
    </div>
    <div class="layui-col-md3 layui-bg-black" >
        <ul class="layui-nav" style="padding:0px;bottom: 3px">
            {% if user %}
                <li class="layui-nav-item">
                    <a href="/user/manage"><img src="../../static/yang.jpeg" class="layui-nav-img">我</a>
                    <dl class="layui-nav-child">
                        <dd><a href="/user/manage">订单信息</a></dd>
                        <dd><a href="/user/info">用户信息</a>
                        <dd><a href="/password">修改密码</a></dd>
                        <dd><a href="/loginout">退了</a></dd>
                    </dl>
                </li>
            {% else %}

                <li class="layui-nav-item">
                    <a href="">注册/登录</a>
                    <dl class="layui-nav-child">
                        <dd><a href="http://localhost:5000/register">注册</a></dd>
                        <dd><a href="http://localhost:5000/login">登录</a></dd>
                    </dl>
                </li>
            {% endif %}
            <li class="layui-nav-item">
                <a href="/user/car">购物车</a>
            </li>
            <li class="layui-nav-item">
                <a href="/chat">客服<span class="layui-badge-dot"></span></a>
            </li>

        </ul>

    </div>
</div>

<div class="layui-row  layui-bg-cyan" style="padding: 8px">
    <div class="layui-col-md1" style="left: 20px">
        <button type="button" class="layui-btn layui-btn-xs" >
            <i class="layui-icon layui-icon-down layui-font-12" ></i> 全部
        </button>
    </div>
    <div class="layui-col-md11" style="right: 20px">
         <span class="layui-breadcrumb" lay-separator="|">
              <a href="javascript:;" onclick="loadGoodTable1()">酒水饮料</a>
              <a href="javascript:;" onclick="loadGoodTable2()">当季水果</a>
              <a href="javascript:;" onclick="loadGoodTable3()">面包糕点</a>
              <a href="javascript:;" onclick="loadGoodTable4()">肉干卤味</a>
              <a href="javascript:;" onclick="loadGoodTable5()">糖果果冻</a>
              <a href="javascript:;" onclick="loadGoodTable6()">膨化食品</a>
              <a href="javascript:;" onclick="loadGoodTable7()">饼干曲奇</a>
              <a href="javascript:;" onclick="loadGoodTable8()">坚果炒货</a>
              <a href="javascript:;" onclick="loadGoodTable9()">蛋糕甜品</a>
              <a href="javascript:;" onclick="loadGoodTable10()">蛋挞披萨</a>
         </span>

    </div>
</div>

<div class="layui-row">
    <div class="layui-carousel" id="test1">
        <div carousel-item>
            <div><img src="../static/ymx1.jpg"></div>
            <div><img src="../static/ymx2.jpg"></div>
            <div><img src="../static/ymx3.jpg"></div>
            <div><img src="../static/ymx4.jpg"></div>
        </div>
    </div>
</div>

<div class="layui-row">
    <div class="layui-col-md3"><h1>限时秒杀</h1></div>
    <div class="layui-col-md3"><h1>走过路过</h1></div>
    <div class="layui-col-md3"><h1>不要错过</h1></div>
    <div class="layui-col-md3"><h1>限时秒杀</h1></div>
</div>

<div class="layui-row">
    <table id="demo" lay-filter="demo" ></table>
</div>

<div class="layui-row">
    <div class="layui-col-md3"><h1>限时秒杀</h1></div>
    <div class="layui-col-md3"><h1>走过路过</h1></div>
    <div class="layui-col-md3"><h1>不要错过</h1></div>
    <div class="layui-col-md3"><h1>限时秒杀</h1></div>
</div>

<div class="layui-row">
    <table id="demo1" lay-filter="demo1" ></table>
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>



<script>
    layui.use('table', function(){
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 450
            ,skin: 'nob'
            ,url: 'http://localhost:5000/goodthing/1' //数据接口
            ,page: false //开启分页
            , cols: [[ //表头
                {field: 'img0',title: '图片0',templet: '#imgTpl0'},
                {field: 'img2', title: '图片1',templet: '#imgTpl1'},
                {field: 'img3', title: '图片2',templet: '#imgTpl2'},
                {field: 'img4', title: '图片3',templet: '#imgTpl3'}
            ]]
            ,done: function (res, curr, count) {
                $('th').hide();
                // loadSecondTable();
            }
        });

    });
</script>
<script>
    function loadGoodTable(url) {
        layui.use('table', function(){
            var table = layui.table;
            //第一个实例
            table.reload('demo',{
                elem: '#demo'
                , height: 500
                , url: url //数据接口
                , page: false //开启分页
                // , request: {
                //     pageName: 'curr' //页码的参数名称，默认：page
                //     , limitName: 'nums' //每页数据量的参数名，默认：limit
                // }

                , cols: [[ //表头
                    // {field: 'id', title: 'ID', width: 300, sort: true, fixed: 'left'}
                    {field: 'name', title: '名称', width: 300}
                    , {field: 'num', title: '数量', width: 300, sort: true}
                    , {field: 'num', title: '数量', width: 300, sort: true}
                    // , {fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#barDemo'}
                ]]
            });
        });
    }

    function loadGoodTable1() {
        loadGoodTable('http://localhost:5000/shop/thing/1');
    }

</script>
{% raw %}
<script type="text/html" id="imgTpl0">
    <a href="http://localhost:5000/login"><img class="product-img" src="{{d.img0}}"></a>
</script>
<script type="text/html" id="imgTpl1">
    <a href="http://localhost:5000/login"><img class="product-img" src="{{d.img1}}"></a>
</script>
<script type="text/html" id="imgTpl2">
    <a href="http://localhost:5000/login"><img class="product-img" src="{{d.img2}}"></a>
</script>
<script type="text/html" id="imgTpl3">
    <a href="http://localhost:5000/login"><img class="product-img" src="{{d.img3}}"></a>
</script>
{% endraw %}
</body>
<script>
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });
</script>
</html>